import {
  CommonForm,
  CrudService,
  PageTemplate,
  SearchForm,
  SmartBreadcrumb,
  ThemeToggle,
  commonCrudConfigs,
  createPageTemplateConfig,
} from './index';

// 示例：使用 PageTemplate 创建完整的 CRUD 页面
const UserManagementPage = () => {
  const config = createPageTemplateConfig()
    .setTableConfig({
      columns: [
        { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '邮箱', dataIndex: 'email', key: 'email' },
        { title: '年龄', dataIndex: 'age', key: 'age', width: 80 },
        { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
      ],
      rowKey: 'id',
    })
    .setSearchConfig({
      fields: [
        { name: 'name', label: '姓名', type: 'input' },
        { name: 'email', label: '邮箱', type: 'input' },
        { name: 'age', label: '年龄', type: 'number' },
      ],
    })
    .setFormConfig({
      fields: [
        { name: 'name', label: '姓名', type: 'input', required: true },
        { name: 'email', label: '邮箱', type: 'input', required: true },
        { name: 'age', label: '年龄', type: 'number', required: true },
      ],
    })
    .setCrudConfig(commonCrudConfigs.restful('/api/users'))
    .build();

  return <PageTemplate {...config} />;
};

// 示例：单独使用 CommonForm
const UserForm = () => {
  const fields = [
    { name: 'name', label: '姓名', type: 'input', required: true },
    { name: 'email', label: '邮箱', type: 'input', required: true },
    { name: 'age', label: '年龄', type: 'number' },
    { name: 'birthday', label: '生日', type: 'date' },
    { name: 'bio', label: '个人简介', type: 'textarea' },
    { name: 'isActive', label: '是否激活', type: 'switch' },
  ];

  return (
    <CommonForm
      fields={fields}
      initialValues={{ isActive: true }}
      onValuesChange={(changedValues, allValues) => {
        console.log('表单值变化:', changedValues, allValues);
      }}
    />
  );
};

// 示例：使用分组表单
const GroupedForm = () => {
  const sections = [
    {
      title: '基本信息',
      fields: [
        { name: 'name', label: '姓名', type: 'input', required: true },
        { name: 'email', label: '邮箱', type: 'input', required: true },
      ],
    },
    {
      title: '详细信息',
      fields: [
        { name: 'age', label: '年龄', type: 'number' },
        { name: 'bio', label: '个人简介', type: 'textarea' },
      ],
    },
  ];

  return <CommonForm sections={sections} />;
};

// 示例：使用 SearchForm
const UserSearch = () => {
  const fields = [
    { name: 'name', label: '姓名', type: 'input' },
    {
      name: 'status',
      label: '状态',
      type: 'select',
      options: [
        { label: '激活', value: 'active' },
        { label: '禁用', value: 'inactive' },
      ],
    },
    { name: 'dateRange', label: '创建时间', type: 'dateRange' },
  ];

  return (
    <SearchForm
      fields={fields}
      onSearch={(values) => console.log('搜索:', values)}
      onReset={() => console.log('重置')}
    />
  );
};

// 示例：使用 SmartBreadcrumb
const AppBreadcrumb = () => {
  return <SmartBreadcrumb showHome={true} homeHref="/" currentPath="/users/123" />;
};

// 示例：使用 CrudService
const UserService = () => {
  const crudService = new CrudService(commonCrudConfigs.restful('/api/users'));

  const handleOperations = async () => {
    try {
      // 查询列表
      const users = await crudService.list({ page: 1, size: 10 });
      console.log('用户列表:', users);

      // 创建用户
      const newUser = await crudService.create({
        name: 'John Doe',
        email: 'john@example.com',
        age: 25,
      });
      console.log('创建用户:', newUser);

      // 更新用户
      const updatedUser = await crudService.update(1, {
        name: 'Jane Doe',
      });
      console.log('更新用户:', updatedUser);

      // 删除用户
      await crudService.delete(1);
      console.log('删除成功');
    } catch (error) {
      console.error('操作失败:', error);
    }
  };

  return (
    <div>
      <button onClick={handleOperations}>执行 CRUD 操作</button>
    </div>
  );
};

// 示例：使用 ThemeToggle
const AppHeader = () => {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <h1>我的应用</h1>
      <ThemeToggle />
    </div>
  );
};

export { AppBreadcrumb, AppHeader, GroupedForm, UserForm, UserManagementPage, UserSearch, UserService };
